<template>

    <div class="home">
        <banner-swiper></banner-swiper>
        <div class="zg_main">
            <home-guide></home-guide>
        </div>
        <class-categories :subjctTypes="subjctTypes[0]" :Category="boutiqueCategory"></class-categories>
        <class-categories :subjctTypes="subjctTypes[1]" :Category="freeCategory"></class-categories>
        <class-categories :subjctTypes="subjctTypes[2]" :Category="costCategory"></class-categories>
        <bottom-rail></bottom-rail>
    </div>

</template>

<script>
import BannerSwiper from "../components/BannerSwiper"
import HomeGuide from "../components/HomeGuide"
import HomeClass from "../components/index/HomeClass"
import ClassCategories from "../components/index/ClassCategories"
import BottomRail from "../components/index/BottomRail"
import axios from "axios"

export default {
  name: 'Home',
  components: {
      BannerSwiper,HomeGuide, HomeClass, ClassCategories, BottomRail
  },
    data() {
        return {
            subjctTypes: [{
                category_id: "精品网课",
                code: 3,
                subject_id: {1: "互联网营销", 2: "设计", 3: "Web前端", 4: "程序开发", 6: "Office"}
            }, {
                category_id: '免费课程',
                code: 2,
                subject_id: {1: "互联网营销", 2: "设计", 3: "Web前端", 4: "程序开发"}
            },
                {
                    category_id: '就业面授班',
                    code: 1,
                    subject_id: {1: "互联网营销", 1019: "Java", 1023: "大数据开发 ", 1020: "软件测试"}
                }],
            freeCategory: [], costCategory: '', boutiqueCategory: '',

            freeReqbody: {//免费课程
                "pageSize": 10,
                "priceType": 2,
            },
            costReqbody: {//付费就业课程
                "pageSize": 10,
                "priceType": 1,
            },
            boutiqueReqbody: {//精品课程
                "pageSize": 10,
                "priceType": 3,
            }
        }
    },
    created() {
        const _this = this
        axios.post("http://localhost:8080/api/course/getCourseList", this.freeReqbody).then(function (resp) {
            _this.freeCategory = resp.data.records
            console.log("freeCategory", resp.data.records)
            for (var i in _this.freeCategory) {
                _this.$set(_this.freeCategory[i], 'style', "display: block;")
            }


        })
        axios.post("http://localhost:8080/api/course/getCourseList", this.costReqbody).then(function (resp) {
            _this.costCategory = resp.data.records
            // console.log("costCategory",resp.data.records)
            for (var i in _this.freeCategory) {
                _this.$set(_this.costCategory[i], 'style', "display: block;")
            }
        })
        axios.post("http://localhost:8080/api/course/getCourseList", this.boutiqueReqbody).then(function (resp) {
            _this.boutiqueCategory = resp.data.records
            // console.log("boutiqueReqbody",resp.data.records)
            for (var i in _this.boutiqueCategory) {
                _this.$set(_this.boutiqueCategory[i], 'style', "display: block;")
            }
        })
    }
}
</script>
